@@include('../partial/head.html')
<!-- css files -->
<!-- custom styles -->  
<link rel="stylesheet" href="../styles/kp-detail.css">
<div id = "app" class="body-title" data-title = "医学科普">
	<!-- banner -->
	<div class="header">
		<!-- <img src="../images/kp-banner.jpg" alt=""> -->
		<img :src="detail.cover" alt="">
		<!-- <span class="like" :class = "isLike" @click = "like"></span> -->
	</div>   
	<!-- /banner -->
	<!-- 收藏按钮 -->
	<div class="like" :class="isLike">
		
	</div>
	<!-- /收藏按钮 -->
	<!-- 播放按钮 -->
	<div class="play">
		<img src="../images/play.png" alt="">
	</div>
	<!-- 播放按钮 -->
	<!-- 返回按钮 -->
	<div class="back">
		<img src="../images/back.png" alt="">
	</div>
	<!-- /返回按钮 -->
	<!-- 课程详情 -->
	<div class="detail">
		<h3 class="title">{{detail.title}}</h3>
		<div class="user-info">
			<span class="name">{{detail.doctorName}}</span>
			<span class="company">{{detail.doctorDesc}}</span>
			<span class="time">{{year}}</span>
			<a class="down" href = "javascript:;" @click="down">下载</a>
		</div> 
		<div class="info" :data-id="detail.article_id" v-html="detail.content">
			
		</div>
	</div>  
	<!-- /课程详情 -->  
	<!-- 课程推荐 -->
	<div class="recom" v-if = "detail.recommend"> 
		<div class="title-prefix">
			课程推荐
		</div> 
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for = "(item,index) in detail.recommend">
					<div class="item">
						<div class="pic">
							<img :src="item.cover" alt="">
						</div>  
						<div class="info">
							<div class="title"> 
								{{item.title}}
								<span>￥ {{item.price}}/年</span>
							</div>
							<div class="desc">
								{{item.shortDesc}}
							</div> 
							<div class="user">
								<span class="name">{{item.doctorName}}</span>
								<span class="company">{{item.doctorDesc}}</span>
							</div>
							<div class="state">
								<span class="read">{{item.subNum}}</span>
								<span class="time">{{item.updated_at}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="swiper-slide">
					<div class="item">
						<div class="pic">
							<img src="../images/doctor.jpg" alt="">
						</div>
						<div class="info">
							<div class="title">
								男人气血不足吃什么补呢
								<span>￥ 199/年</span>
							</div>
							<div class="desc">
								气血不足的结果会导致脏腑功能的减退
							</div>
							<div class="user">
								<span class="name">赵华佗</span>
								<span class="company">上海市长征医院</span>
							</div>
							<div class="state">
								<span class="read">1000</span>
								<span class="time">2分钟前更新</span>
							</div>
						</div>
					</div>
				</div> -->
			</div>
		</div>
	</div>
	<!-- /课程推荐 -->
	<!-- 留言 -->
	<div class="leave-message"> 
		<div class="title-prefix"> 
			留言精选 
			<a class = "post btn-default" href="javascript:;"><span @click="comment">发表评论</span></a>
		</div> 
		<div class="message" v-if="detail.comments">
			<div class="item" v-for = "(item,index) in detail.comments">
				<div class="title">
					<div class="user-pic">
						<!-- <img src="../images/user.png" alt=""> -->
						<img :src = "item.avatar" alt="">
					</div>
					<div class="user">
						<p class="name">{{item.nickname}}</p>
						<p class="state">
							<span class="fllor">{{index + 1}}楼</span>
							<span class="time">{{item.time}}</span>
						</p>
					</div> 
				</div>
				<div class="content">
					<div class="pic">
						 
					</div> 
					<div class="detail"> 
						<div class="info">
							{{item.content}}
						</div> 
						<div class="repeat" v-if = "item.reply">
							<div class="user"> 
								<span class="name-repeat">{{item.reply.nickname}} <i>医生</i>：</span>
								<span class="time">{{item.reply.time}}</span>
							</div>
							<div class="info">
								{{item.reply.content}}
							</div>
						</div>
					</div> 
				</div>
			</div>
		</div> 
		<div class="empty-message" v-else>
			<div class="empty-icon"><img src="../images/empty-message.png" alt=""></div>
			<p>还没有评论快来抢沙发</p>
		</div>
	</div>
	<!-- /留言 -->
	<!-- 评论 -->
	<div class="comment hide">
		<input type="text">
		<label class = "btn-default" for="" @click="sendMessage">发送</label>
	</div>
	<!-- /评论 -->
</div>   
<script src="../scripts/kp-detail.js"></script>

<!-- js files -->
<!-- custom javascript -->
@@include('../partial/foot.html')